<template>
  <view>
    <u-loading-page
        :loading=loading.open
        :loadingText=loading.text
        loadingMode="semicircle"
        color="#747d8c"
    >
    </u-loading-page>
    <view
        v-if="!loading.open"
        style="margin-top: 20rpx"
    >
      <!-- 活动信息 -->
      <view>
        <uni-card>
          <template v-slot:cover>
            <view style="position: relative;overflow: hidden;">
              <u--image
                  width="100%"
                  :src=data.activityBanner
                  @click="service.previewImg([data.activityBanner])"
              >
                <view slot="error" style="font-size: 24rpx;">加载失败</view>
              </u--image>
              <view
                  v-if="!service.check.isNull(data.activityTitle)"
                  style="position: absolute;
                  bottom:0;
                  background-color:rgba(47,53,66,0.85);
                  width:100%;
                  text-align: center">
                <text
                    style="Letter-spacing: 4px;
                    font-weight: bold;
                    font-size: 40rpx;
                    color: #ffffff;"
                >
                  {{ data.activityTitle }}
                </text>
              </view>
              <view
                  v-if="!service.check.isNull(data.registerStatus)"
                  style="position: absolute;top: 10rpx;right: 10rpx;"
              >
                <u-tag
                    :text="html.status(data.registerStatus)"
                    plain
                    plainFill
                    size="large"
                    :type="style.status(data.registerStatus)">
                </u-tag>
              </view>
              <view
                  style="position: absolute;top: 10rpx;left: 10rpx;"
              >
                <view>
                  <u-avatar
                      :src="data.storeAvatar"
                      @click="service.previewImg([data.storeAvatar])"
                  >
                  </u-avatar>
                </view>
              </view>
            </view>
          </template>

          <view v-if="!service.check.isNull(data.activityOverview)">
            <text
                style="font-size:29rpx;
                color: #747d8c;
                Letter-spacing: 0.08em;">
              {{ data.activityOverview }}
            </text>
          </view>
          <u-gap height="1" bgColor="#bbb" marginTop="5" marginBottom="10"></u-gap>

          <view
              v-if="!service.check.isNull(data.storeName)"
              class="cardItem"
              style="text-align: center"
          >
            <uni-icons color="#D91B1B" type="shop-filled" size="28"></uni-icons>
            <text
                class="cardContentFont"
                style="margin-left: 10rpx;
                letter-spacing: 0.2em;
                vertical-align: top;
                color: #eb4d4b;font-size: 38rpx"
            >
              {{ data.storeName }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.id)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              记录编号:
            </text>
            <text class="cardContentFont">
              {{ service.html.isNullToStr(data.orderNum) }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.activityId)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              活动编号:
            </text>
            <text class="cardContentFont">
              {{ data.activityId }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.cost)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              报名费用:
            </text>
            <text class="cardContentFont" style="color:#ffa502;font-size: 36rpx">
              {{ data.cost }}
            </text>
            <text class="cardContentFont" style="margin-left: 6rpx;font-size: 27rpx">
              元
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.registrationTime)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              报名时间:
            </text>
            <text class="cardContentFont">
              {{ service.style.time(data.registrationTime, 8) }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.openTime)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              活动开始时间:
            </text>
            <text class="cardContentFont">
              {{ service.style.time(data.openTime, 8) }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.overTime)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              活动结束时间:
            </text>
            <text class="cardContentFont">
              {{ service.style.time(data.overTime, 8) }}
            </text>
          </view>

          <view
              v-if="!service.check.isNull(data.activityAddress)"
              class="cardItem"
          >
            <text class="cardLabelFont">
              活动地址:
            </text>
            <text class="cardContentFont">
              {{ data.activityAddress }}
            </text>
          </view>

        </uni-card>
      </view>
    </view>

    <u-popup
        :show="payPopup.show"
        :round="10"
        mode="bottom"
        :direction=0
        :closeable=true
        @close="payPopup.close()"
    >
      <view style="margin: 10px 0;text-align: center">
        <view style="font-size: 36rpx;font-weight: bold">
          <text>需要支付 : </text>
          <text
              style="color: #ffa502;
              margin: 0 10px">
            {{data.cost}}
          </text>
          <text>元</text>
        </view>

        <view style="margin: 10px 0;overflow: hidden;">
          <radio-group @change="payPopup.change">
            <view style="margin-left: 10px">
              <view style="width: 100%;overflow: hidden;">
                <view style="float: left;">
                  <image src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png" class="icon"></image>
                </view>
                <view style="float: left;">
                  <text
                      style="vertical-align: middle;
                      font-size: 30rpx;
                      font-weight: bold;
                      letter-spacing: 0.1em;
                      position: relative;top: 8px"
                  >
                    微信支付
                  </text>
                </view>
                <view style="float: right;position: relative;top: 10px">
                  <label>
                    <radio :value=1 />
                  </label>
                </view>
              </view>
              <u-gap height="1" bgColor="#bbb" marginTop="5" marginBottom="10"></u-gap>
              <view style="width: 100%;margin: 10px 0">
                <view style="float: left;">
                  <image src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png" class="icon"></image>
                </view>
                <view style="float: left;">
                  <text
                      style="vertical-align: middle;
                      font-size: 30rpx;
                      font-weight: bold;
                      letter-spacing: 0.1em;
                      position: relative;top: 7px"
                  >
                    余额支付
                  </text>
                </view>
                <view style="float: right;position: relative;top: 8px">
                  <label>
                    <radio :value=0 />
                  </label>
                </view>
              </view>
            </view>
          </radio-group>
        </view>
        <view style="margin: 10px">
          <u-button
              type="success"
              @click="payPopup.pay"
          >
            <text
                style="font-size: 36rpx;
                letter-spacing: 0.2em;
                font-weight: bold"
            >
              付款
            </text>
          </u-button>
        </view>
      </view>

    </u-popup>

    <view class="bottomMenu">
      <uni-goods-nav
          :options="bottomMenu.options"
          :button-group="bottomMenu.buttonGroup"
          :fill="true"
          @click="bottomMenu.leftClick"
          @buttonClick="bottomMenu.rightClick"
      />
    </view>
  </view>
</template>

<script>
import service from "@/utils/service";

export default {
  data() {
    let _vm = this;
    return {
      service: service,
      data: {
        id: '',
        /* 订单编号 */
        orderNum: '',
        /* 活动标题 */
        activityTitle: '',
        /* 活动背景图 */
        activityBanner: '',
        /* 活动简介 */
        activityOverview: '',
        /* 活动编号 */
        activityId: '',
        /* 活动开始时间 */
        openTime: '',
        /* 活动结束时间 */
        overTime: '',
        /* 报名时间 */
        registrationTime: '',
        /* 报名状态 */
        registerStatus: '',
        /* 报名费用 */
        cost: '',
        /* 商家头像 */
        storeAvatar: '',
        /* 商家名称 */
        storeName: '',
        /* 商家编号 */
        storeId: '',
        /* 活动纬度 */
        activityLat: '',
        /* 活动经度 */
        activityLng: '',
        /* 活动地址 */
        activityAddress: '',
      },
      style: {
        status(v) {
          switch (v) {
            case 0:
              return "warning"
            case 1:
              return "primary"
            case 2:
              return "success"
            case -1:
              return "error"
          }
        }
      },
      html: {
        status(v) {
          switch (v) {
            case 0:
              return '待支付'
            case 1:
              return '已报名'
            case 2:
              return '已签到'
            case -1:
              return '已取消'
          }
        }
      },
      /* 底部菜单 */
      bottomMenu: {
        options: [
          {icon: 'icon-custom-service', text: '联系店铺'}
        ],
        buttonGroup: [],
        buttonGroupOptions:[
          {
            text: '导航',
            backgroundColor: 'linear-gradient(269deg,#42e695,#3bb2b8)',
            color: '#fff',
            index: 0,
          },
          {
            text: '付费报名',
            backgroundColor: 'linear-gradient(269deg,#42e695,#3bb2b8)',
            color: '#fff',
            index: 1,
          }
        ],
        leftClick(v) {
          console.log("底部菜单左侧点击 : ", v)
          if (v.index === 0) {
            _vm.gotoMerchant();
          }
        },
        rightClick(v) {
          console.log("底部菜单右侧点击 : ", v)
          switch (v.content.index) {
            case 0:
              service.handleMapLocation(_vm,
                  _vm.data.activityLat,
                  _vm.data.activityLng,
                  _vm.data.activityAddress)
              break;
            case 1:
              _vm.payPopup.open();
              break;
            default:
              uni.showToast({
                title: '不存在的功能',
                icon: 'none'
              })
          }
        }
      },
      loading: {
        // 进度
        plan: 0,
        // 阈值
        threshold: 0,
        open: true,
        text: '加载内容中请稍等....',
        def(){
          _vm.loading.plan = 0
          _vm.loading.threshold = 1
          _vm.loading.open = true
        },
        step() {
          if (++this.plan >= this.threshold && _vm.loading.open) {
            try {
              /* 根据类型展示功能按钮 */
              let index = -1;
              switch (_vm.data.registerStatus) {
                case 0:
                  index = 1;
                  break;
                case 1:
                  index = 0;
                  break;
                case 2:
                  index = 0
                  break;

              }
              _vm.bottomMenu.buttonGroup = []
              _vm.bottomMenu.buttonGroupOptions.forEach(e => {
                if(e.index === index){
                  _vm.bottomMenu.buttonGroup.push(e);
                }
              })
            } catch (e) {
              /* 异常了功能按钮直接为空 */
              _vm.bottomMenu.buttonGroup = []
              console.log(" loading.step() err :  ", e)
            } finally {
              _vm.loading.open = false;
            }
          }
        }
      },
      /* 付费报名弹窗 */
      /* 条件筛选对象 */
      payPopup: {
        show: false,
        method: -1,
        change(e) {
          console.log("支付方式选择 : " ,e)
          _vm.payPopup.method = Number(e.detail.value);
        },
        pay(){
          switch (_vm.payPopup.method) {
            case 0:
              this.balancePay(_vm.data.activityId);
              break;
            case 1:
              console.log("微信支付")
              this.wechatPaySignUp()
              break;
            case -1:
              uni.showToast({
                title: "请选择支付方式",
                icon: 'none',
                duration: 2000
              });
              break;
            default:
              uni.showToast({
                title: "支付方式错误",
                icon: 'none',
                duration: 2000
              });
          }
        },
        open() {
          _vm.payPopup.show = true;
        },
        close() {
          _vm.payPopup.show = false;
        },
        def() {
          _vm.payPopup.method = -1
        },
      },
    };
  },
  methods: {
    /* 联系商家 */
    gotoMerchant() {
      uni.navigateTo({
        url: '/pages/HM-chat/User-Chat?id=' + uni.getStorageSync("usId") + '&sendid=' + this.data.storeId +
            '&title=' + this.data.storeName + "&avatar=" + this.data.storeAvatar,
        fail(res) {
          console.log("跳转到联系商家错误 : ", res)
        }
      })
    },
    // 余额支付报名
    balancePay(id) {
      let _t = this;
      uni.showLoading({
        title: "余额支付中......"
      })
      this.$axios({
        url: `user/usActivity/payBalance`,
        method: "post",
        data: {id}
      }).then((res) => {
        if (res.code === 0) {
          uni.showToast({
            title: "报名成功",
            duration: 2000
          })
          _t.loading.def();
          _t.getDetail();
        } else {
          uni.showToast({
            title: res.result,
            icon: 'none',
            duration: 2000
          })
        }
      }).finally(() => {
        uni.hideLoading();
        _t.payPopup.close();
      })
    },
    // 微信支付报名
    wechatPaySignUp(){
      let _t = this;
      uni.showLoading({
        title: '生成报名记录中.....',
        mask: true
      })
      this.$axios({
        url: `user/usActivity/wechatPaySignUp`,
        method: "post",
        data: {activityId: _t.data.activityId}
      }).then(async res => {
        console.log(" user/usActivity/wechatPaySignUp :  ", res);
        if(res.code === 0){
          /* 生成报名记录成功 根据记录唯一编号 创建微信订单 */
          let wxOrderRes = await service.request.createWxOrder(res.result,5,this.$axios)
          if(wxOrderRes.code === 0){
            service.request.wxPayment(wxOrderRes.result,
                function success(res){
                  uni.showToast({
                    title: '报名成功',
                    duration: 3000,
                    mask: true
                  })
                  _t.loading.def();
                  _t.getDetail();
                },
                function fail(res){
                  console.log("微信支付报名失败...")
                  uni.showToast({
                    title: '支付失败',
                    duration: 3000,
                    icon: 'none',
                  })
                }
            )
          }
        }else{
          uni.showToast({
            title: res.result,
            duration: 3000,
            icon: 'none'
          })
        }
      }).finally(() => {
        uni.hideLoading();
        _t.payPopup.close();
      })
    },
    getDetail() {
      let _t = this;
      this.$axios({
        url: "user/usActivity/detail",
        method: "post",
        data: {
          registerId: _t.data.id
        }
      }).then(res => {
        console.log(" user/usActivity/detail :  ", res)
        if (res.code === 0) {
          let errFields = [];
          let task = service.executeTask;
          task(function () {
            _t.data.activityTitle = res.result.activityTitle;
          }, errFields, "活动标题")
          task(function () {
            _t.data.orderNum = res.result.orderNum;
          }, errFields, "订单编号")
          task(function () {
            _t.data.activityBanner = _t.$config.URLIMAGE + res.result.activityBanner;
          }, errFields, "活动背景图")
          task(function () {
            _t.data.activityOverview = res.result.activityOverview;
          }, errFields, "活动简介")
          task(function () {
            _t.data.registrationTime = res.result.registrationTime;
          }, errFields, "报名时间")
          task(function () {
            _t.data.registerStatus = res.result.registerStatus;
          }, errFields, "报名状态")
          task(function () {
            _t.data.cost = res.result.cost;
          }, errFields, "报名费用")

          task(function () {
            _t.data.activityId = res.result.activityId;
          }, errFields, "活动编号")
          task(function () {
            _t.data.openTime = res.result.openTime;
          }, errFields, "活动开始时间")
          task(function () {
            _t.data.overTime = res.result.overTime;
          }, errFields, "活动结束时间")
          task(function () {
            _t.data.activityLat = res.result.activityLat;
          }, errFields, "活动纬度")
          task(function () {
            _t.data.activityLng = res.result.activityLng;
          }, errFields, "活动经度")
          task(function () {
            _t.data.activityAddress = res.result.activityAddress;
          }, errFields, "活动地址")
          task(function () {
            _t.data.storeAvatar = _t.$config.URLIMAGE + res.result.storeAvatar;
          }, errFields, "商家头像")
          task(function () {
            _t.data.storeName = res.result.storeName;
          }, errFields, "商家名称")
          task(function () {
            _t.data.storeId = res.result.storeId;
          }, errFields, "商家编号")
          if(errFields.length > 0){
            console.log("获取失败的参数 : ", errFields.toString())
          }
        } else {
          uni.showToast({
            title: '获取信息失败 : ' + res.result,
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        _t.loading.step();
      })
    },

  },
  onLoad(e) {
    console.log("路由参数 : ", e)
    if (!service.check.isNull(e.registerId)) {
      this.data.id = e.registerId;
      // 详情
      this.loading.threshold = 1;
    }
  },
  onShow() {
    this.getDetail();
  }
}
</script>

<style lang="scss">
.uni-card {
  padding: 0 !important;
}

.cardLabelFont {
  font-size: 30rpx;
  color: #2d3436;
  letter-spacing: 0.1em;
  margin-right: 0.5em;
}

.cardContentFont {
  font-size: 31rpx;
  font-weight: bold;
  color: #2f3542;
}

.cardItem {
  margin-bottom: 5rpx
}

.bottomMenu {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  /* #ifdef H5 */
  left: var(--window-left);
  right: var(--window-right);
  /* #endif */
  bottom: 0;
}
.payPop {
  z-index: 100;
}
.icon {
  width: 55rpx;
  height: 55rpx;
  margin-right: 20rpx;
  margin-top: 10rpx;
}
</style>
